<template>
    <div>
        商铺名称<input type="text" v-model="que.spmc">
            商品状态  <select  v-model="que.ztid">
                            <option value="null">请选择</option>
                            <option v-for="m in xlk" :value="m.ztid">{{m.ztmc }}</option>
                            
                        </select>
                        <input type="button" value="查询" @click="xs()">
                        <input type="button" value="重置" @click="cz">
        <a href="https://localhost:7047/api/we/dc">导出</a>


        <table class="table">
            <thead>
                <tr>
                    <td>商铺名称</td>
                    <td>状态</td>
                    <td>商铺楼层</td>
                    <td>联系电话</td>
      
                    <td>商铺编号</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="m in data">
                    <td>{{ m.spmc }}</td>
                    <td :style="m.ztmc=='空置'?'color:blue':'color:green'">{{ m.ztmc}}</td>
                    <td>{{ m.splc }}</td>
                    <td>{{ m.phoe.substring(0,3)}}****{{ m.phoe.substring(7,11)}}</td>
      
                    <td>{{ m.bh }}</td>
                    <td>
                        <input type="button" value="删除" @click="sc(m.id)">
                        <input type="button" value="编辑" @click="xg(m.id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="page(1)">
        <input type="button" value="上一页" @click="page(2)">
        <input type="button" value="下一页" @click="page(3)">
        <input type="button" value="尾页" @click="page(4)">
    


    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';

const stro = useRouter();

const data=ref([{
      "id": 1,
      "spmc": "大气商城",
      "ztid": 2,
      "splc": "string",
      "phoe": "string",
      "scsj": "2025-05-13T09:38:33.5946367",
      "sczt": false,
      "bh": "string",
      "ztmc": "空置"
}])

const que=ref({
    index:1,
    page:5,
    spmc:"",
    ztid:null
})

const page=(a:any)=>{
    debugger
    if(a==1){
        que.value.index=1;
xs()

    }
      if(a==2){
        if(que.value.index>1){
que.value.index-=1;
xs()
        }
        
    }
      if(a==3){
        if(que.value.index<quer.value.size){
  que.value.index+=1;
  xs()
        }
      


    }
      if(a==4){
        que.value.index=quer.value.size;
xs()

    }
}
const cz=()=>{
 
   que.value. spmc="",
     que.value. ztid=null
     xs();
}

const quer=ref({
    count:0,
    size:0
})
onMounted(()=>{
    xs();
    xss();
})

const xlk=ref([{
    "ztid": 1,
    "ztmc": "出租中"
}])
const xss=()=>{
    axios.get("https://localhost:7047/api/we/ztxs").then(res=>{
        xlk.value=res.data
    })
}
const xs=()=>{
    axios.get("https://localhost:7047/api/we/xs",{params:que.value}).then(res=>{
        data.value=res.data.size


        quer.value.count=res.data.count;
        quer.value.size=Math.ceil(quer.value.count/que.value.page)
    })
}


const sc=(a:any)=>{
    if(!confirm("确认删除吗")){
        return
    }
    axios.delete("https://localhost:7047/api/we/delete",{params:{id:a}}).then(res=>{
        if(res.data>0){
            alert("删除成功")
            xs();
        }else{
            alert("删除失败")
        }
    })
}

const xg=(a:any)=>{
    stro.push({path:"/xg",query:{id:a}})
}
</script>

<style scoped>

</style>